<template>
  <div v-loading="loading" class="focusChange">
    <i :class="[liked === true ? 'star-on':'star-off']" @click="attention" />
  </div>
</template>
<script>
import { sysFocusOnSave, delsysFocusOn } from '@/api/base/deal/dealBase'

export default {
  name: 'FOCUS',
  props: {
    sourceId: {
      type: String,
      default: () => ''
    },
    sourceName: {
      type: String,
      default: () => ''
    },
    focusType: {
      type: String,
      default: () => ''
    },
    focus: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      liked: false,
      loading: false
    }
  },
  watch: {
    sourceId: {
      handler() {
        var val = this.focus
        if (val === 'Y' || val === '是') {
          this.liked = true
        } else {
          this.liked = false
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    attention() {
      this.liked = !this.liked
      const data = {
        focusType: this.focusType,
        sourceId: this.sourceId,
        sourceName: this.sourceName
      }
      if (this.liked) {
        sysFocusOnSave(data).then((response) => {
          if (response.code === 200) {
            this.msgSuccess(this.$t('已关注'))
            this.$emit('change', this.liked)
          }
        })
      } else {
        delsysFocusOn(this.sourceId).then((response) => {
          if (response.code === 200) {
            this.msgSuccess(this.$t('已取消关注'))
            this.$emit('change', this.liked)
          }
        })
      }
      // 更新视图
      if (this.$parent.$parent.$parent?.updateView !== undefined) {
        this.$parent.$parent.$parent.updateView()
      }
    }
  }
}
</script>
